<template>
  <div class="app-container">
    <div id="data">
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value1"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>Bug 趋势图</strong>
      <div id="main" style="width: 100%; height: 380px" />

      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value2"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>用例趋势图</strong>
      <div id="main2" style="width: 100%; height: 380px" />
    </div>
  </div>
</template>

<script>
import * as projectData from "@/api/projectData";
export default {
  data() {
    return {
      value1: "",
      value2: "",
    };
  },
  methods: {
    async myChart(id) {
      var myChart = this.echarts.init(document.getElementById("main"));
      let res = await projectData.IterationBugPlot(id);

      let names = [];
      let iteractionAdds = [],
        iteractionCloses = [];

      for (let val of res.data.iteraction_version_plot) {
        iteractionAdds.push(val.Bug_trend_histogram_add_num);
        iteractionCloses.push(val.Bug_trend_line_closed_num);
      }

      var option = {
        tooltip: {
          trigger: "axis",
          formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}",
        },
        legend: {
          data: ["新增", "关闭"],
        },
        xAxis: {
          data: names,
        },
        yAxis: [
          {
            type: "value",
            name: "新增",
            show: true,
            interval: 50,
            axisLine: {
              lineStyle: {
                color: "#5e859e",
                width: 2,
              },
            },
          },
          {
            type: "value",
            name: "关闭",
            min: 0,
            max: 100,
            interval: 50,
            axisLabel: {
              formatter: "{value} %",
            },
            axisLine: {
              lineStyle: {
                color: "#5e859e", //纵坐标轴和字体颜色
                width: 2,
              },
            },
          },
        ],
        series: [
          {
            name: "新增",
            type: "bar",
            barWidth: "50%",
            data: iteractionAdds,
          },
          {
            name: "关闭",
            type: "line",
            smooth: true,
            data: iteractionCloses,
          },
        ],
      };
      myChart.setOption(option);
    },
    async myChart2(id) {
      let res = await projectData.IterationCasePlot(id);
      let datas = [[], [], []];
      let names = [];

      for (let val of res.data.version_case_trend_histogram) {
        names.push(val.mouth);
        datas[0].push(val.case_pass);
        datas[1].push(val.case_failed);
        datas[2].push(val.case_blocked);
      }
      // for (let val of res.data.iteraction_version_extension
      //   .version_case_trend_histogram.done) {
      //   for (let v of Object.values(val)) {
      //     datas[1].push(v);
      //   }
      // }
      // for (let val of res.data.iteraction_version_extension
      //   .version_case_trend_histogram.failed) {
      //   for (let v of Object.values(val)) {
      //     datas[2].push(v);
      //   }
      // }
      console.log(names, datas);
      var myChart2 = this.echarts.init(document.getElementById("main2"));

      let ticketOption = {
        color: [
          "#2777EC",
          "#2EACFF",
          "#FFA61C",
          "#2EC054",
          "#F28685",
          "#8C64D7",
        ],
        legend: {
          show: true,
          right: "5%",
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          x: "7%",
          y: "15%",
          x2: "3%",
          y2: "15%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(151, 151, 151, 1)",
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: names,
          },
        ],

        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(151, 151, 151, 1)",
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: true,
              color: "rgba(151, 151, 151, 1)",
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(226, 232, 236, 1)",
                type: "dashed",
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#fff", "rgba(245, 246, 250, 1)"],
              },
            },
          },
        ],
        series: [
          {
            name: "已执行",
            type: "bar",
            smooth: false,
            barWidth: 20,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "#157DFF",
              },
            },
            data: datas[0],
          },
          {
            name: "失败",
            barWidth: 20,
            type: "bar",
            smooth: false,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "#5FD77E",
              },
            },
            data: datas[1],
          },
          {
            name: "阻塞",
            barWidth: 20,
            type: "bar",
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "#F7B500",
              },
            },
            data: datas[2],
          },
        ],
      };

      myChart2.setOption(ticketOption);
    },
  },
  mounted() {
    let id = window.location.href.split("id=")[1];
    this.myChart(id);
    this.myChart2(id);

    // var myChart2 = this.echarts.init(document.getElementById("main2"));
    // //准备配置项
    // let option = {
    //   //直角坐标系 grid 中的 x 轴
    //   xAxis: {
    //     type: "category", //坐标轴类型,可选
    //     data: ["一月", "二月", "三月", "四月", "五月"], //类目数据
    //   },
    //   //直角坐标系 grid 中的 y 轴
    //   yAxis: {
    //     type: "value", //坐标轴类型,可选
    //   },
    //   series: [
    //     {
    //       data: [120, 200, 150, 80, 70],
    //       type: "bar",
    //     },
    //   ],
    // };

    // let ticketOption = {
    //   color: ["#2777EC", "#2EACFF", "#FFA61C", "#2EC054", "#F28685", "#8C64D7"],
    //   legend: {
    //     show: true,
    //     right: "5%",
    //     itemWidth: 16,
    //     itemHeight: 11,
    //   },
    //   tooltip: {
    //     trigger: "axis",
    //   },
    //   grid: {
    //     x: "7%",
    //     y: "15%",
    //     x2: "3%",
    //     y2: "15%",
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(151, 151, 151, 1)",
    //         },
    //       },
    //       axisLabel: {
    //         show: true,
    //         // margin: 20,
    //         textStyle: {
    //           color: "#000",
    //         },
    //       },
    //       axisTick: {
    //         show: false,
    //       },
    //       // boundaryGap: true,
    //       data: ["1月", "2月", "3月", "4月", "5月"],
    //     },
    //   ],

    //   yAxis: [
    //     {
    //       type: "value",
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(151, 151, 151, 1)",
    //         },
    //       },
    //       axisLabel: {
    //         show: true,
    //         // margin: 20,
    //         textStyle: {
    //           color: "#000",
    //         },
    //       },
    //       axisTick: {
    //         show: true,
    //         color: "rgba(151, 151, 151, 1)",
    //       },
    //       splitLine: {
    //         show: false,
    //         lineStyle: {
    //           color: "rgba(226, 232, 236, 1)",
    //           type: "dashed",
    //         },
    //       },
    //       splitArea: {
    //         show: true,
    //         areaStyle: {
    //           color: ["#fff", "rgba(245, 246, 250, 1)"],
    //         },
    //       },
    //     },
    //   ],
    //   series: [
    //     {
    //       name: "已执行",
    //       type: "bar",
    //       smooth: false,
    //       barWidth: 20,
    //       // showSymbol: false,/
    //       symbolSize: 8,
    //       zlevel: 3,
    //       lineStyle: {
    //         normal: {
    //           color: "#157DFF",
    //         },
    //       },
    //       data: [100, 138, 150, 153, 180],
    //     },
    //     {
    //       name: "失败",
    //       barWidth: 20,
    //       type: "bar",
    //       smooth: false,
    //       // showSymbol: false,
    //       symbolSize: 8,
    //       zlevel: 3,
    //       lineStyle: {
    //         normal: {
    //           color: "#5FD77E",
    //         },
    //       },
    //       data: [233, 233, 200, 180, 199],
    //     },
    //     {
    //       name: "阻塞",
    //       barWidth: 20,
    //       type: "bar",
    //       smooth: false,
    //       symbolSize: 8,
    //       zlevel: 3,
    //       lineStyle: {
    //         normal: {
    //           color: "#F7B500",
    //         },
    //       },
    //       data: [154, 189, 250, 210, 300],
    //     },
    //   ],
    // };

    // myChart2.setOption(ticketOption);
  },
};
</script>

<style scoped>
#data {
  margin: 50px 20px;
}
</style>
